import React, { useEffect, forwardRef, useImperativeHandle } from "react";
import { Form, Select, Input, Row, Col, InputNumber } from 'antd';
import config from "../../config/config";

const ChatTabPane = forwardRef((props, ref) => {

    const {
        libraryVisible, pageSource, patternOptions, documentOptions, selectDocument, selectPattern, workflowGraph,
        ollamaModels, settingItemMap
    } = props;

    const [form] = Form.useForm();
    const { getFieldsValue, validateFields, setFieldsValue, resetFields } = form;
    useImperativeHandle(ref, () => ({
        getFieldsValue: getFieldsValue,
        validateFields: validateFields,
        resetFields: resetFields,
        setFieldsValue: setFieldsValue,
    }));

    useEffect(() => {
        setFieldsValue(settingItemMap);
    }, [settingItemMap]);

    const parseTextLabel = (text) => {
        if ("answer" == pageSource) {
            return text.replace("RAG", "Agent");
        } else if ("agentic" == pageSource) {
            return text.replace("RAG", "Agentic");
        } else if ("program" == pageSource) {
            return text.replace("RAG", "编程");
        }
        return text;
    }

    const modelOptions = ollamaModels.map(item => {
        let optionObj = new Object();
        optionObj.label = item.id;
        optionObj.value = item.id;
        optionObj.desc = item.id;
        return optionObj;
    });

    const patternRequire = !!patternOptions && !"topic, custom".includes(pageSource);

    return (
        <div style={{ overflowY: "auto", height: window.innerHeight - 222, padding: "0px 0px 0px 20px" }}>
            <Form form={form} labelCol={{ span: 7 }} wrapperCol={{ span: 17 }}>
                <Form.Item label={parseTextLabel("RAG模式")} name={"pattern"} rules={[{ required: patternRequire, message: parseTextLabel('选择RAG模式') }]} style={{ display: patternRequire ? "block" : "none" }}>
                    <Select
                        style={{ width: '100%' }}
                        placeholder={parseTextLabel("选择RAG模式")}
                        onChange={value => selectPattern(value)}
                        options={patternOptions}
                    />
                </Form.Item>
                <Form.Item label={"知识库"} name={"library"} rules={[{ required: !!documentOptions, message: '选择私有知识库' }]} style={{ display: !libraryVisible && !!documentOptions ? "block" : "none"}}>
                    <Select
                        maxTagCount={1}
                        style={{ width: '100%' }}
                        placeholder="选择私有知识库"
                        onChange={value => selectDocument(value)}
                        options={documentOptions}
                    />
                </Form.Item>
                <Form.Item label={"模型名称"} name={"model"} rules={[{ required: false }]}>
                    <Select
                        style={{ width: '100%' }}
                        placeholder={"选择模型"}
                        options={modelOptions}
                    />
                </Form.Item>
                <Form.Item label={"BaseUrl"} name={"baseUrl"} rules={[{ required: false }]}>
                    <Input defaultValue={config.OLLAMA_MODEL_HOST} />
                </Form.Item>
                <Form.Item label={"ApiKey"} name={"apiKey"} rules={[{ required: false }]}>
                    <Input placeholder={"请输入ApiKey"} />
                </Form.Item>
                <Form.Item label={"TopK"} name={"topk"} rules={[{ required: false }]}>
                    <InputNumber min={0} max={100} step={1} defaultValue={3} style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item label={"温度"} name={"temperature"} rules={[{ required: false }]}>
                    <InputNumber min={0.0} max={1.0} step={0.1} defaultValue={0.3} style={{ width: '100%' }} />
                </Form.Item>
            </Form>
            <Row style={{ display: workflowGraph ? "block" : "none" }}>
                <Row>
                    <Col span={7}><div style={{ textAlign: "right" }}>Workflow：</div></Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <div style={{ textAlign: "center", width: "315px", overflow: "auto" }}>
                            <img id="ragWorkflowImage" src={workflowGraph} />
                        </div>
                    </Col>
                </Row>
            </Row>
        </div>
    );
})

export default ChatTabPane;
